// eslint-disable-next-line no-unused-vars
import React, { useState } from 'react';
import { useBoolean, useRequest } from 'ahooks';
import styles from './style.scss';
import SelectIcon from './img/s1.png';
import ActivityDownload from '@/components/ActivityDownload';
import BottomDownload from '@/components/BottomDownload';
import { getGiftList } from '@/service/live';

const exchange = () => {
  const [visible, { setTrue, setFalse }] = useBoolean(false);
  const [list, setList] = useState([]);
  const [select, setSelect] = useState(0);
  useRequest(() => getGiftList(select), {
    onSuccess: (res) => {
      setList(res);
    },
    refreshDeps: [select],
  });
  return (
    <section className={styles.exchange}>
      <header>
        <div className={select === 0 ? styles.active : null} onClick={() => setSelect(0)}>金块专区</div>
        <div className={select === 1 ? styles.active : null} onClick={() => setSelect(1)}>成长值专区</div>
      </header>
      <div className={styles.bottom} />
      <nav>
        <div>
          <img src={SelectIcon} alt="" />
          <span>每周一00:00:00 上新</span>
        </div>
        <div>
          <img src={SelectIcon} alt="" />
          <span>限时抢兑</span>
        </div>
      </nav>
      <section className={styles.list}>
        {
          list?.map((item) => (
            <div>
              <img src={item?.goodsImg} alt="" />
              <p>{item?.goodsName}</p>
              <i>
                剩余
                {item?.goodsCount || 0}
                个
              </i>
              <div>
                <span>{item?.goodsPrice}</span>
                <span>{select === 0 ? '金块' : '经验'}</span>
              </div>
              <button type="button" onClick={setTrue}>立即兑换</button>
            </div>
          ))
        }
      </section>
      <BottomDownload />
      <ActivityDownload visible={visible} onClose={setFalse} />
    </section>
  );
};

export default exchange;
